<template>
  <div class="tools-vuex-generate">
    <div class="tools-vuex-generate-top-tips">
      自动生成vuex文件文件内容包括action.js，api.js，getters.js，mutation-types.js，mutation.js
    </div>
    <el-form :model="form" label-width="100px" class="tools-vuex-generate-form form-2-layout">
      <!-- 文件路径输入框 + 选择按钮 -->
      <el-form-item label="获取文件路径" class="tools-vuex-generate-file-path">
        <SelectSaveFilePath v-model="form.filePath" @selectFilePath="selectFilePath" />
      </el-form-item>
      <el-form-item label="创建文件">
        <el-input v-model="form.fileName" placeholder="请输入文件名称" />
      </el-form-item>
      <el-form-item label="接口名称">
        <el-input v-model="form.apiName" placeholder="请输入接口名称" />
      </el-form-item>
      <el-form-item label="接口地址">
        <el-input v-model="form.apiUrl" placeholder="请输入接口地址" />
      </el-form-item>
      <el-form-item label="接口描述">
        <el-input v-model="form.remark" placeholder="请输入接口描述" />
      </el-form-item>
      <el-form-item label="接口类型">
        <el-select v-model="form.requestType" placeholder="请选择接口类型">
          <el-option label="get" value="get"></el-option>
          <el-option label="post" value="post"></el-option>
          <el-option label="postFile" value="postFile"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveToFile">保存文件</el-button>
        <el-button @click="clearAll">清空</el-button>
      </el-form-item>
    </el-form>

    <TipsContent :message="message" :messageType="messageType"></TipsContent>
  </div>
</template>

<script setup lang="ts">
const message = ref<string>('结果')
const messageType = ref<string>('info')
const form = reactive({
  filePath: '', //文件路径
  fileName: '', //要创建的文件名称
  apiName: '', // 接口名称
  apiUrl: '', // 接口地址
  requestType: 'get', // 请求方式
  remark: '' // 接口描述
})
const selectFilePath = async (type: string, info: string) => {
  if (type == 'info') {
    form.filePath = info
    message.value = `已选择路径：${info}`
    messageType.value = 'info'
  } else {
    message.value = `选择路径失败：${info}`
    messageType.value = 'error'
  }
}
const saveToFile = async () => {
  if (!form.filePath) return
  if (!form.filePath.trim()) {
    message.value = '内容不能为空！'
    messageType.value = 'error'
    return
  }

  try {
    const res = await window.electronAPI.writeFile(form.filePath, { ...form })
    message.value = res.message
    messageType.value = res.success ? 'success' : 'error'
    ElMessage({
      message: 'This is a success.',
      grouping: true,
      type: 'success'
    })
  } catch (err) {
    message.value = `保存失败：${err}`
    messageType.value = 'error'
  }
}
const clearAll = () => {
  form.filePath = ''
  form.apiName = ''
  form.apiUrl = ''
  form.requestType = 'get'
  form.remark = ''
  form.fileName = ''
}
</script>

<style lang="scss" scoped>
.tools-vuex-generate {
  padding: 60px;
  padding-top: 0;
  &-top-tips {
    margin-bottom: 20px;
    background: $color_5;
    border-radius: 6px;
    height: 40px;
    line-height: 40px;
    border: 1px solid white;
    padding: 0 12px;
  }
  .tools-vuex-generate-file-path {
    .el-form-item__content {
      display: flex;
    }
  }
}
</style>
